<template>
    <a-layout class="Layout">
        <a-layout-sider theme="light" :width="Left" class="No-transition" :style="{
            borderRight: '1px solid ' + token.colorBorderSecondary
        }">
            <slot name="Menu"></slot>
        </a-layout-sider>
        <div class="LayoutMoveBar" :class="{ state: State }" @mousedown="StarDragMoveBar"
            :style="{ left: Left + 'px' }">
            <div class="BarColor" :style="{ background: token.colorBorder }"></div>
        </div>
        <a-layout>
            <a-layout-content class="Content" :style="{ backgroundColor: token.colorBgContainer }">
                <slot name="Content"></slot>
            </a-layout-content>
        </a-layout>
    </a-layout>
    <div class="MoveMark" v-if="State"></div>
</template>

<script setup>
import { ref } from 'vue';
import { theme } from 'ant-design-vue';
const { token } = theme.useToken();

const Left = ref(250);
const State = ref(false);

const MouseUp = function () {
    State.value = false;
    window.removeEventListener('mousemove', MouseEvent, true);
    window.removeEventListener('mouseup', MouseUp, true);
}
const MouseEvent = function (event) {
    window.addEventListener('mouseup', MouseUp, true);
    const x = event.pageX;

    if (x < 200) {
        Left.value = 200;
    } else if (x > 400) {
        Left.value = 400;
    } else {
        Left.value = x;
    }

};
// const 
const StarDragMoveBar = function (event) {
    State.value = true;
    window.addEventListener('mousemove', MouseEvent, true);
};



</script>

<style lang="less" scoped>
.MoveMark {
    position: fixed;
    cursor: e-resize;
    width: 100%;
    height: 100%;
    z-index: 999999;
}

.No-transition {
    padding: 8px 0;
    transition: none;
    border-right: 1px solid #ccc;
}

.Layout {
    position: relative;
}

.LayoutMoveBar {
    width: 5px;
    height: 100%;
    position: absolute;
    left: 200px;
    top: 0;
    cursor: e-resize;
    z-index: 10;

    .BarColor {
        width: 100%;
        height: 100%;
        display: none;
    }

    &:hover {
        .BarColor {
            display: block;
        }
    }

    &.state {
        .BarColor {
            display: block;
        }
    }
}

.Content {
    overflow-y: auto;
    margin: 0px;
}
</style>